<template>
  <div class="list-page">
    <tool-bar nav="K8s-SSH同步到UAT" class="imp-uat">
    </tool-bar>

    <my-list
        ref="list"
        url="/ops/k8s-ssh/list-test-uat"
        @param="preload"
        @loaded="procData"
        :page-size="10"
        :store="true"
        :row-class-name="rowClass"
        row-key="id"
        :query="$data.query"
    >


      <el-table-column label="名称" align="left" width="240">
        <template v-slot="scope">
          <div class="link cell-name" @click="edit_click(scope.row)">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <!--      <el-table-column align="left" label="镜像名" prop="imageName" min-width="240"></el-table-column>-->
      <el-table-column align="left" label="测试环境版本" min-width="240">
        <template v-slot="scope">

          <el-tag type="danger" v-if="!scope.row.imageVersion">
            无
          </el-tag>
          <el-tag v-else>{{ scope.row.imageVersion }}</el-tag>


          <el-tag type="danger" v-if="!scope.row?.readyReplicas && scope.row.imageVersion"  style="margin-left:2px;">0/{{ scope.row.replicas }}</el-tag>


        </template>
      </el-table-column>
      <el-table-column align="left" label="UAT环境版本" min-width="180">
        <template v-slot="scope">
          <div @click="refresh_uat(scope.row)" class="btn" title="点击刷新数据">
            <el-tag type="warning" v-if="!scope.row.uat.version">
              无
            </el-tag>
            <el-tag v-else-if="scope.row.uat.version  == scope.row.imageVersion">
              {{ scope.row.uat.version }}
            </el-tag>
            <el-tag type="warning" v-else-if="scope.row.uat.version != scope.row.imageVersion">
              {{ scope.row.uat.version }}
            </el-tag>

            <el-tag  type="danger"  v-if="scope.row.uat.version &&  !scope.row?.uat?.readyReplicas  " style="margin-left:2px;">0/{{ scope.row.uat.replicas }}
            </el-tag>

            <el-tag  type="danger"  v-else-if="scope.row.uat.version &&  scope.row?.uat?.readyReplicas != scope.row?.uat?.replicas " style="margin-left:2px;">{{scope.row?.uat?.readyReplicas}}/{{ scope.row.uat.replicas }}
          </el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column label="差距" align="left" class-name="cell-flex" width="120">
        <template v-slot="scope">
          <el-tag v-if="scope.row.diff_ver"  :type="scope.row.diff_ver.endsWith('后')? 'danger':'primary' ">{{ scope.row.diff_ver }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template v-slot="scope">
          <el-button @click="deploy_to_uat(scope.row)"  :disabled="$data.syncing">
            部署...
          </el-button>

          <el-button @click="sync_to_uat(scope.row)" type="warning" :disabled="$data.syncing">
            同步到UAT
          </el-button>
        </template>
      </el-table-column>
      <template #query="scope">

        <kv label="语言">
          <selector v-model="scope.query.language" enum="JenkinsLanguageEnum" clearable></selector>
        </kv>

        <kv label="名称空间">
          <el-input v-model="scope.query.namespace"></el-input>
        </kv>

        <kv label="名称">
          <el-input v-model="scope.query.name"></el-input>
        </kv>

        <kv label="状态">
          <selector v-model="scope.query.isReady" :data="{true:'就绪',false:'异常','':'全部'}"></selector>
        </kv>
      </template>

      <template #button>
        <el-button @click="loadData">刷新</el-button>
      </template>
    </my-list>
  </div>
</template>
<style scoped lang="scss">
.btn {
  display: inline-block;
  cursor: pointer;
  margin-right: 8px;
}

.btn:hover span {
  opacity: 0.8;
  border-bottom: solid 1px gray;
}

::v-deep(tr.row-java) .cell-name {
  color: #1e4a90;
}

::v-deep(tr.row-vue) .cell-name {
  color: #694002;
}

::v-deep(tr.row-node) .cell-name {
  color: #286f04;
}


.imp-uat ::v-deep(.last) * {
    background-color: rgb(255, 153, 0) !important;
    color: white !important;
    border-radius: 4px;
    padding:4px 6px;
}
</style>
<script setup>
/**
 * Created by CodeGenerator at 2021-03-14 15:58:11
 */
import productLine from "@/component/product-line.vue";
import appEnv from "@/component/app-env.vue"





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive(
    {
      "target_dlg": false,
      "target": {"istio": false, "referK8sEnv": "", "k8sApiHost": "", "k8sNamespace": "default", "envProfile": "test"},
      "target_edit": {
        "istio": false,
        "referK8sEnv": "",
        "k8sApiHost": "",
        "k8sNamespace": "default",
        "envProfile": "test"
      },
      "products": [],
      "list": [],
      "query": {"language": "Java", "productLineCode": "", "targetEnv": ""},
      "sourceK8sApiHost": "",
      syncing: false
    });


const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const env_change = function (v, m) {
  $data.sourceK8sApiHost = m && m.url || "";
};

const rowClass = function (rowOpt) {
  return "row-" + rowOpt.row.name.split('-').getLast()
};
const bind_target_click = function () {
  $data.target_dlg = true;
  $data.target_edit = Object.assign({}, $data.target);
};
const export_click = function () {
  jv.info("未实现")
};

const refresh_uat = function (row) {
  jv.$http.post("/ops/k8s-ssh/fetch-uat-version", {namespace: $data.query.namespace, name: row.name})
      .then(res => {
        var json = res.data.data;
        row.uat.version = json.imageVersion;
        row.uat.replicas = json.replicas;
        row.uat.readyReplicas = json.readyReplicas
      });
};

const deploy_to_uat = function (row) {
  $data.sync_done_number = 0;
  $data.syncing = true;
  jv.prompt("镜像:版本号", "输入格式").then(res => {
    if (res.value) {
      jv.$http.post("/ops/k8s-ssh/sync-to-uat", {namespace: $data.query.namespace, name: row.name, image: res.value})
          .then(res => {
            jv.alert("部署 " + row.name + " 成功!<br />");
            loadData()
          })
          .finally(() => {
            $data.syncing = false;
          });
    }
  }).catch(it=>{
    $data.syncing = false;
  })

}

const sync_to_uat = function (row) {
  $data.sync_done_number = 0;
  $data.syncing = true;
  jv.$http.post("/ops/k8s-ssh/sync-to-uat", {namespace: $data.query.namespace, name: row.name})
      .then(res => {
        jv.alert("同步 " + row.name + " 成功!<br />" +
            "生效启动还需要3-15分钟<br />" +
            "对于Java，普通功能更新可能只需要3分钟； 而如果修改了pom.xml文件中的依赖项，则需要从thc-test同步大约150MB内容,约15分钟 <br/>" +
            "对于前端应用，同步大概5分钟。");
        loadData()
      })
      .finally(()=>{
        $data.syncing = false;
      });

};
const preload = function (param, callback) {
  if (!list.value.$refs.query.chk()) {
    return callback(false);
  }
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function (res) {
  res.data.data.forEach(row => {

    row.id = row.name;
    if (!row.uat.version) {
      row.diff_ver = "";
    } else {
      row.diff_ver = jv.getTimeDiffSummary(Date.from(row.uat.version) - Date.from(row.imageVersion)) || "=="
    }
  })

};

const loadData = function (pageNumber) {
  list.value.loadData(pageNumber);
};
const edit_click = function (row) {
//记录上次点击行
  var rowId = row.id;
  list.value.setLastRow(row);
};

onMounted(function () {
  jv.$loadData("target", v => $data.target = v)
  jv.$loadData("query", v => $data.query = v)
})


</script>